@import '../style/var';

.em-cell-group {
  &:root {
    --grid-template-columns: 4;
    --gap: 15px;
  }
  background-color: $--cell-group-background-color;

  &__title {
    padding: $--cell-group-title-padding;
    color: $--cell-group-title-color;
    font-size: $--cell-group-title-font-size;
    line-height: $--cell-group-title-line-height;
  }

  &--grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(var(--grid-template-columns), 1fr);
  }

  &--grid &__title {
    grid-column-start: 1;
    grid-column-end: calc(var(--grid-template-columns) + 1);
  }

  &--small &__title {
    font-size: $--cell-group-title-font-size * 0.8;
  }
}
